<template>
  <div>

    <div class="line">
      <el-menu
          :default-active="activeIndex2"
          class="el-menu-demo"
          mode="horizontal"
          @select="handleSelect"
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#ffd04b">
        <el-menu-item index="1" @click="toMainBody">首页</el-menu-item>
        <el-submenu index="2">
          <template slot="title">靶场实验</template>
          <el-menu-item index="2-1" @click="toSafeTest">安全实验</el-menu-item>
          <el-menu-item index="2-2" @click="toCTFTest">CTF实验</el-menu-item>
        </el-submenu>

        <el-col :span="12">
          <el-autocomplete
              class="inline-input"
              v-model="search"
              :fetch-suggestions="querySearchAsync"
              placeholder="请输入内容"
              @select="handleSelect"
          ></el-autocomplete>
        </el-col>
        <el-button class="btn_search" @click="searchByEs" icon="el-icon-search">搜索</el-button>
        <template v-if="currentAccount.username==''">
          <el-menu-item index="3" @click="toLogin" style="margin-left: 65%">登录</el-menu-item>
          <el-menu-item index="4" @click="toRegister">注册</el-menu-item>
        </template>
        <template v-if="currentAccount.username!=''">
          <img :src="currentAccount.profilePhoto"
               style="height:50px;width: 50px;border-radius: 100%; position: absolute;top:5px;left: 80% ">
          <el-submenu index="5" style="position:absolute;left: 85.8%">
            <template slot="title">欢迎您：{{ currentAccount.username }}</template>
            <el-menu-item index="5-1" @click="toPersonalCenter">个人中心</el-menu-item>
            <el-menu-item v-if="sessionStorage.getItem('role')=='9'||sessionStorage.getItem('role')=='11'" index="5-2" @click="toBackgroundManage">后台管理</el-menu-item>
            <el-menu-item index="5-3" @click="logout">退出</el-menu-item>
          </el-submenu>
        </template>
      </el-menu>

    </div>


  </div>
</template>

<script>
import ScoreLeaderBoard from "@/components/scoreLeaderBoard.vue";
import bread from "@/components/Bread.vue";


export default {

  name: "top",
  components: {ScoreLeaderBoard},
  data() {
    return {
      queryStrings: [],
      currentAccount: {
        username: '',
        profilePhoto: '',
      },
      scoreLeaderBoard: [],
      activeIndex: '1',
      activeIndex2: '1',
      search: '',
    };
  },
  methods: {
    loadAll() {
      return[{value:"安全"},{value:"文件类"}]

    },
    toBackgroundManage(){
      window.location.href='/BackgroundManage'
    },
    handleSelect(key, keyPath) {
    },
    getCurrentAccount() {
      let token = sessionStorage.getItem("token");
      this.$axios.postForm("/user/getCurrentAccount", {token: token})
          .then(response => {
            if (response.data.code == 200) {
              this.currentAccount.username = response.data.data.username;
              this.currentAccount.profilePhoto = response.data.data.profilePhoto;
            }
          }).catch(err => {
      })
    },
    searchByEs() {
      this.$parent.keyword = this.search;
      this.queryStrings.unshift(this.search)
      if (this.queryStrings.length > 10) this.queryStrings.pop()
      localStorage.setItem("queryHistory", this.queryStrings)
    },
    toSafeTest() {
      sessionStorage.setItem("parentType", 0)
      this.$router.push("/Bread").catch(err => {
        this.$parent.$refs.testBody.initTestType();
      });
    },
    toCTFTest() {
      sessionStorage.setItem("parentType", 1)
      this.$router.push("/Bread").catch(err => {
        this.$parent.$refs.testBody.initTestType();
      });
    },
    toPersonalCenter() {
      this.$router.push("/PersonalCenter");
      this.$parent.$refs.testBody.myCollect();
    },
    toMainBody() {
      this.$router.push("/MainBody").catch(err=>{
      })
    },
    logout() {
      sessionStorage.removeItem("token")
      this.$axios.post("/user/logout").then(response => {
        if (response.data.code == 200) {
          this.$router.push("/Login")
        }
      })
    },
    toLogin() {
      this.$router.push("/Login");
    },
    toRegister() {
      this.$router.push("/Register");
    },
    querySearchAsync(queryString, cb) {
      var queryStrings = this.queryStrings;
      var results = queryString ? queryStrings.filter(this.createStateFilter(queryString)) : queryStrings;

      clearTimeout(this.timeout);
      this.timeout = setTimeout(() => {
        cb(results);
      }, 3000 * Math.random());
    },
    createStateFilter(queryString) {
      return (state) => {
        return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
      };
    },
  },
  created() {
    this.getCurrentAccount();
  },
  mounted() {
    this.queryStrings = this.loadAll();
  }
}
</script>

<style scoped>

.inline-input {
  position: absolute;
  top: 10px;
  left: 50%;
}

.btn_search {
  position: absolute;
  top: 10px;
  left: 65%;
}
</style>